<template>
  <!-- registrationNo 注册码 -->
  <div class="ADvanced">
    <div class="con">
      <div class="text_box">
        
        <el-button  @click="getList2" type="primary">获取机器码</el-button>
        <!-- <span v-if="listdata" @click="copyTextFunction">编码(点击复制)：</span> -->
        <span v-if="listdata" ></span>
        <span id="copyText" style="user-select: text;">{{listdata}}</span>
        <!-- <input  style="position: absolute;top: 99999px;" type="text"  v-model="listdata" id="copyText"> -->
      </div>
      <span class="tited">注册码</span>
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        style="width: 469px;"
      >
        <el-form-item label="组织编码" class="datainput">
          <el-input v-model="form.name" style="width: 378px;"></el-input>
        </el-form-item>
        <el-form-item label="注册码">
          <div class="inp_box">
            <input
              class="el-input__inner"
              type="text"
              v-model="value[0]"
              size="3"
              
              @input="moveNext(value[0], 'a')"
            />
            -
            <input
              class="el-input__inner"
              type="text"
              ref="a"
              v-model="value[1]"
              size="3"
              maxlength="4"
              @input="moveNext(value[1], 'b')"
            />
            -
            <input
              class="el-input__inner"
              type="text"
              ref="b"
              v-model="value[2]"
              size="3"
              maxlength="4"
              @input="moveNext(value[2], 'c')"
            />
            -
            <input
              class="el-input__inner"
              type="text"
              ref="c"
              v-model="value[3]"
              size="3"
              maxlength="4"
              @input="moveNext(value[3], '')"
            />
            <i v-show="yanzheng == 1" class="el-icon-success"></i>
            <i v-show="yanzheng == 2" class="el-icon-error"></i>
          </div>
        </el-form-item>
        <el-form-item>
          <span style="display: flex;">
             <el-button  @click="onSubmit" type="primary">确定注册</el-button>
            <!-- <div class="search-btns chongzhi" @click="onSubmit2">
              重置
            </div> -->
          </span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from "../api/htttp2";
export default {
  data() {
    return {
      yanzheng: "", //验证注册码 1正确，2异常
      listdata: "", //编码数据
      flag: 2, //全屏
      list: {}, //获取数据
      form: {
        name: "",
      },
      value: ["", "", "", ""],
    };
  },

  mounted() {
    this.getList(); //获取数据
  },

  methods: {
    //获取编码
    getList2() {
      request({ url: "/registration/getMachineCode", method: "get" }).then(
        (res) => {
          if (res.code == 200) {
            this.listdata = res.data;
          }
        }
      );
    },
    // 点击复制
    copyTextFunction(){
        // 获取输入框的内容
        var input = document.getElementById("copyText"); 
            // console.log("input",input.innerHTML);
            // input.value = this.listdata; // 获取要复制的文本
            // document.body.appendChild(input);
            // input.select(); // 选中文本
            // document.execCommand('copy'); // 执行复制操作
            // document.body.removeChild(input); // 移除临时的输入框
        this.$message({showClose: true,message: '复制成功',type: 'success'});
    },
    //获取数据
    getList() {
      request({ url: "/registration/info", method: "post" }).then((res) => {
        if (res.code == 200) {
          this.list = res.data;
          this.form.name = res.data.unitCode;
          this.value = res.data.registrationCode.split("-");
        }
      });
    },
    // 重置
    onSubmit2() {
      this.form.name = "";
      this.value = ["", "", "", ""];
    },
    //  确定
    onSubmit() {
      var data = {
        machineCode: this.value.join("-"),
        unitCode: this.form.name,
      };
      request({ url: "/registration/save", method: "post", data }).then(
        (res) => {
          if (res.code == 200) {
            this.$message({
              showClose: true,
              message: "注册成功",
              type: "success",
            });
            this.yanzheng = 1; //注册码正确
            // localStorage.setItem("quanping", "0"); //注册码取消全屏
            // this.$router.push("/systemOverview"); //首页
          } else {
            this.yanzheng = 2; //注册码异常
          }
        }
      );
    },
    chunkString(str) {
  const numChunks = Math.ceil(str.length / 4);
  const chunks = new Array(numChunks);
  for (let i = 0, o = 0; i < numChunks; ++i, o += 4) {
    chunks[i] = str.substr(o, 4);
  }
  return chunks;
},
    //注册码输入
    moveNext(value, v) {
      if (value.length==16) {
        this.value = this.chunkString(value)
      }
      if (value.length>16) {
       this.value = value.split('-');
      }
      if (value.length == 4) {
        if (v) {
          this.$refs[v].focus();
        }
      }
      if (value.length> 4 && v=='a') {
        this.value[0]=value.slice(0, 4)
      }
    },
  },
};
</script>

<style scoped lang="scss">
.el-icon-error {
  color: red;
  font-size: 20px;
}
.el-icon-success {
  color: #0c5d50;
  font-size: 20px;
}
.text_box {
  display: flex;
  align-items: center;
  position: absolute;
  left: 40px;
  span {
     font-size: 14px;
  }
}
.search-btns {
  width: 64px;
  height: 32px;
  border-radius: 4px;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  font-weight: bold;
  // background-color: #0c5d50;
}
.chongzhi {
  color: #999;
  margin-left: 12px;
  // background-color: #073431;
}
.inp_box {
  display: flex;
  align-items: center;
  input {
    width: 90px;
  }
}

.ADvanced {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .con {
    width: 100%;
    height: 100%;
    border-radius: 0px 4px 4px 4px;
    padding: 16px;
    background-color: #fff;
    box-sizing: border-box;
    color: #1A1A1A;
    display: flex;
    flex-direction: column;
    align-items: center;
    .tited {
      display: block;
      width: 100%;
      text-align: center;
      margin: 44px 0;
      font-size: 35px;
    }
    .el-dialog__headerbtn {
      top: 11px;
    }
    .vidobox {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      .vidoitem {
        width: 310px;
        height: 150px;
        border-radius: 4px;
        margin-right: 12px;
        margin-bottom: 12px;
        position: relative;
        overflow: hidden;
        .vidotitle {
          height: 26px;
          padding: 0px 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          top: 0px;
          left: 0px;
          border-radius: 4px 0px 4px 0px;
          background: rgba(26, 26, 26, 0.4);
          color: #fff;
          font-size: 14px;
        }
        &:nth-child(3n) {
          margin-right: 0px;
        }
      }
    }
  }
}
.choicedio {
  width: 100%;
  height: 450px;
}
:deep(.el-dialog__header) {
  display: flex;
  align-items: center;
  height: 40px;
  //   border-bottom: 1px solid #E6E6E6;
  background-color: #067e7a;
  span {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    top: 8px;
    left: 20px;
  }
  i {
    color: #fff !important;
  }

  .el-icon-close {
    font-size: 20px !important;
  }
  :deep(.el-dialog__headerbtn) {
    top: 11px;
  }
}
:deep(.el-dialog__body) {
  padding: 0px;
}

:deep(.el-dialog__footer) {
  // margin-top: 20px;
  text-align: right !important;
  border-top: 1px solid #e6e6e6;

  button {
    padding: 8px 17px;
  }
}
</style>
<style></style>
